<template>
  <el-dialog title="修改问卷" :visible.sync="dialog.dialogVisible" @close="close" :width="dialog.width" @opened="openDialog">
    <el-form ref="form" :model="dialog.form" label-width="80px">
      <el-form-item label="问卷标题"  >
          <el-input type="textarea" v-model="form.title" autosize></el-input>
      </el-form-item>
      <el-form-item label="问卷描述">
          <el-input type="textarea" v-model="form.desc" autosize></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="10">
          <el-form-item label="问卷日期:">
            <el-date-picker v-model="form.date"   type="datetimerange" 
              range-separator="至"  start-placeholder="开始日期"    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2"><span v-html="'&nbsp;'"></span></el-col>
        <el-col :span="12">
          <el-form-item label="是否发布:">
            <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="form.status"></el-switch><span v-html="'&nbsp;&nbsp;&nbsp;'"></span> {{form.status ? "创建并发布问卷":"仅仅创建问卷"}}
          </el-form-item>
        </el-col>
      </el-row>
    <el-table :data="form.subject"  border style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="title" label="题目"  align="center"  width="280">
        <template slot-scope="scope">
          <el-input type="textarea" v-model="scope.row.title" style="width: 100%;height:100%" autosize ></el-input>
        </template> 
      </el-table-column>
      <el-table-column prop="type" label="类型"  align="center"  width="100">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="选择题目类型">
            <el-option v-for="item in types" :key="item.id" 
                  :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
        <el-table-column label="必填" width="65"  align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.must" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="选项"  align="center">
          <template slot-scope="scope">
            <el-tag  :key="tag.id" v-for="tag in scope.row.options" closable size="small"  :disable-transitions="false"
              @close="handleClose(tag,scope.$index)"> {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag" v-if="inputVisible[scope.$index]" v-model="inputValue" ref="saveTagInput" size="mini" autosize
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm(scope.$index)">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index)">+ 添加选项</el-button>
          </template>
        </el-table-column>
         <el-table-column label="操作" width="95"  align="center" fixed="right">
          <template slot-scope="scope" >
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSub(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-row>
        <el-col :span="2"><el-button @click="addSub">添加题目</el-button></el-col>
        <el-col :span="22">
          <el-tooltip class="item" effect="dark" content="双击删除此问卷" placement="top">
            <el-button type="danger" @dblclick.native="deleteQuestion">删除问卷</el-button>
          </el-tooltip>
          <el-button type="success" @click="dialog.dialogVisible = false">放弃修改</el-button>
          <el-button type="primary" @click="updateQuestion">确认修改</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { ref,reactive ,watch} from "@vue/composition-api";
import { UpdateQuestion ,DeleteQuestion } from "@/api/question"; 
import {  checkForm } from "@/utils/check"; 

export default {
  name: "editDialog",
  props: {
    flag: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default:()=>{} ,
      must:true
    }
  },
  setup(props, {attrs, emit, root, refs }) {
    const types = reactive([
      { type:"radio",name:"单选"}, 
      { type:"check",name:"多选" },
      { type:"text",name:"文本" }
    ])

    const form = reactive({
      id:"",
      status:true ,
      title : "", 
      desc:"",
      date:[] ,
      subject:[]
    });
    // 值复制
    const openDialog = ()=>{ 
      form.id= props.data.value.id ;
      form.status = props.data.value.status  ;
      form.title = props.data.value.title  ;
      form.desc = props.data.value.desc  ;
      form.date = props.data.value.date  ;
      form.subject = props.data.value.subject  ;
    }

    const  inputVisible = ref([]) ;
    const  inputValue = ref('') ;

    const dialog = reactive({
      dialogVisible : false,
      width: "1200px"
    });
    watch(() => {   dialog.dialogVisible = props.flag; })
    
    const close = ()=>{
       // 刷新 数据库 就可以
      dialog.dialogVisible = false;
      emit("update:flag", false);
    }
    const addSub =()=>{ form.subject.push({ title:"", must: true , type:"radio", options:[] })
    }
    const deleteSub =(index)=>{form.subject.splice(index,1) ;  }
    const handleClose= (tag,index)=>{
      form.subject[index].options.splice(form.subject[index].options.indexOf(tag), 1);
    }
    const showInput = (index)=> {// 深度监听
      root.$set(inputVisible.value,index,true) ;
    }
    const handleInputConfirm = (index)=> {
      if (inputValue.value) {
        form.subject[index].options.push(inputValue.value);
      }
      inputVisible.value[index] = false ;
      inputValue.value = "";
    }
    const closeDialog =()=>{
      // 判断是否有内容
        let res=confirm("还未提交，确认退出吗?") ;
        if(res == false){
          return ;
        }
      dialog.dialogVisible = false ;
    }
    const updateQuestion =()=>{
      let flag = checkForm(form) ;
      if(flag ){
        // 提交数据 
        updateQuestion(form).then((res)=>{
          if(res.data.status == 0){
            root.$message({
              type: 'success',
              message: '修改成功!'
            });
          }
        })
      }
    }
    // 表单验证

    const deleteQuestion =()=>{
      DeleteQuestion([form.id]).then(()=>{
        dialog.dialogVisible = false ;
      })
    }
    return {
      form ,
      dialog ,inputVisible , inputValue , types,  deleteQuestion ,
      close ,openDialog ,addSub,deleteSub  , handleClose , showInput,handleInputConfirm ,closeDialog ,updateQuestion 
    };
  }
};
</script>

<style lang="scss">
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    font-size: 14px;
    margin-left: 10px;
    margin-bottom: 10px;
    // height: 0px;
    line-height: 30px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .input-new-tag {
    width: 150px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
